<template>
  <nav>
    <header class="top-bg">
      <div class="top-head">
        <ul class="nav-left">
          <li class="col-1">
            <router-link to="/">收藏鲜花网(hua.com)</router-link>
          </li>
          <li class="col-2 bg">
            <router-link to="/">关注微信</router-link>
            <div class="box">
              <img
                src="../../assets/images/componentsimg/wxguanjia_qrcode.png"
                alt=""
              />
              <p>扫码关注</p>
              <p>回复"礼物"更多惊喜!</p>
            </div>
          </li>
          <li class="col-3 bg">
            <router-link to="/">花礼网app</router-link>
            <div class="box">
              <img
                src="../../assets/images/componentsimg/app_download_qrcode.png"
                alt=""
              />
              <p>新人专享100元APP礼包</p>
            </div>
          </li>
        </ul>
        <ul class="nav-right">
          <li v-if="this.$store.state.telnum == ''">
            <router-link to="/login">你好，请登录</router-link> &nbsp;
          </li>
          <li v-if="this.$store.state.telnum == ''">
            <router-link to="/reginster">注册</router-link>
          </li>
          <li v-if="this.$store.state.telnum != ''">
            <router-link to='/menberlenter'>{{this.$store.state.telnum}}</router-link>
          </li>
          <li class="line">|</li>
          <li>
            <router-link to="/">订单详情</router-link>
          </li>
          <li class="line">|</li>
          <li class="bg">
            <router-link to="/menberlenter">我的花礼</router-link>
          </li>
          <li class="line">|</li>
          <li class="bg">
            <router-link to="/help"
              >客户服务
              <span class="el-icon-caret-bottom"></span>
            </router-link>
            <div class="box">
              <p><router-link to="/">在线付款</router-link></p>
              <p><router-link to="/">帮助中心</router-link></p>
              <p><router-link to="/">售后服务</router-link></p>
              <p><router-link to="/">配送范围</router-link></p>
              <p><router-link to="/">留言反馈</router-link></p>
            </div>
          </li>
          <li class="line">|</li>
          <li class="bg gwc">
            <router-link to="/shoppcar">
              <span class="che"></span>
              购物车
              <span class="leng">(0)</span>
              <span class="el-icon-caret-bottom"></span>
            </router-link>
            <div class="box">
              <p>继续逛逛吧</p>
            </div>
          </li>
          <li class="line">|</li>
          <li>
            <router-link to="/gifts">特色礼品生日礼物</router-link>
          </li>
        </ul>
      </div>
    </header>
    <header class="content-bg">
      <div class="logo">
        <router-link to="/">
          <img src="../../assets/images/componentsimg/pc_hualogo.png" alt="" />
        </router-link>
      </div>
      <div class="seach">
        <input type="text" placeholder="商品关键词" /><button>搜索</button>
      </div>
      <div class="hone">
        <div><span class="sj"></span> 400-889-8188</div>
        <div>|</div>
        <div>
          <router-link to="/"><span class="kf"></span>在线客服</router-link>
        </div>
      </div>
    </header>
    <nav class="nav-bg">
      <div class="nav-box">
        <div class="title-box">
          <div class="title">全部商品导购<i class="el-icon-arrow-down"></i></div>
          <div class="title-nav-box">
            <h4>鲜花</h4>
            <ul>
              <li><router-link to='/flower'>爱情鲜花</router-link></li>
              <li><router-link to='/flower'>生日鲜花</router-link></li>
              <li><router-link to='/flower'>友情鲜花</router-link></li>
              <li><router-link to='/flower'>问候鲜花</router-link></li>
              <li><router-link to='/flower'>祝贺鲜花</router-link></li>
              <li><router-link to='/flower'>婚庆鲜花</router-link></li>
              <li><router-link to='/flower'>探病慰问</router-link></li>
              <li><router-link to='/flower'>道歉鲜花</router-link></li>
              <li><router-link to='/flower'>开业花篮</router-link></li>
            </ul>
            <h4>永生花</h4>
            <ul>
              <li><router-link to='/yongflower'>经典花盒</router-link></li>
              <li><router-link to='/yongflower'>巨型玫瑰</router-link></li>
              <li><router-link to='/yongflower'>薰衣草</router-link></li>
              <li><router-link to='/yongflower'>永生瓶花</router-link></li>
              <li><router-link to='/yongflower'>特色永生花</router-link></li>
            </ul>
            <h4>礼品</h4>
            <ul>
              <li><router-link to='/gifts'>泰国保鲜花</router-link></li>
              <li><router-link to='/gifts'>音乐盒</router-link></li>
              <li><router-link to='/gifts'>水晶内雕</router-link></li>
              <li><router-link to='/gifts'>金箔花</router-link></li>
              <li><router-link to='/gifts'>化妆镜</router-link></li>
              <li><router-link to='/gifts'>香薰系列</router-link></li>
              <li><router-link to='/gifts'>音乐睡枕</router-link></li>
              <li><router-link to='/gifts'>花瓶/相框</router-link></li>
              <li><router-link to='/gifts'>卡通花束</router-link></li>
              <li><router-link to='/gifts'>品牌公仔</router-link></li>
              <li><router-link to='/gifts'>首饰</router-link></li>
              <li><router-link to='/gifts'>Giftstalk精选</router-link></li>
              <li><router-link to='/gifts'>创意礼品</router-link></li>
              <li><router-link to='/gifts'>礼品卡</router-link></li>
              <li><router-link to='/gifts'>多肉植物盆栽</router-link></li>
            </ul>
            <h4>绿植</h4>
            <ul>
              <li><router-link to='/'>绿色植物</router-link></li>
              <li><router-link to='/'>盆栽花卉</router-link></li>
            </ul>
          </div>
        </div>
        <ul class="nav">
          <li><router-link to="/">首页</router-link></li>
          <li><router-link to="/flower">鲜花</router-link></li>
          <li><router-link to="/yongflower">永生花</router-link></li>
          <li><router-link to="/cake">蛋糕</router-link></li>
          <li><router-link to="/gifts">礼品</router-link></li>
          <li><router-link to="/chocolates">巧克力</router-link></li>
          <li><router-link to="/huayu">花语大全</router-link></li>
          <li><router-link to="/you">设计师臻选鲜花</router-link></li>
          <li><router-link to="/valentine">情人节鲜花礼物</router-link></li>
        </ul>
      </div>
    </nav>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      name : ''
    }
  },
  updated() {
    this.name = this.$store.state.telnum
    console.log(this.name);
  },
};
</script>

<style scoped lang='less'>
nav {
  .top-bg {
    background: #f2f2f2;
    border-bottom: 1px solid gainsboro;
  }
  .top-head {
    width: 1200px;
    height: 35px;
    line-height: 35px;
    margin: 0 auto;
  }
}
a {
  color: #737373;
  font-size: 12px;
}
.box {
  position: absolute;
  left: -1px;
  top: 100%;
  z-index:2;
  border: 1px solid gainsboro;
  border-top: none;
  width: 160px;
  line-height: 18px;
  font-size: 12px;
  text-align: center;
  padding-top: 20px;
  display: none;
  background: #fff;
  // img {
  //   // width: 124px;
  //   // height: 124px;
  // }
  p {
    margin: 5px 0;
  }
}
.nav-right .box {
  width: 100%;
  padding: 0;
}
.gwc .box {
  width: 320px;
  padding: 15px;
  left: -213px;
  line-height: 70px;
}
a:hover {
  color: #fe7a24;
  text-decoration: none;
}
li:hover > a {
  text-decoration: none;
  color: #fe7a24;
}
.nav-left {
  float: left;
  li {
    float: left;
    padding: 0 10px;
    list-style: none;
    &::before {
      margin-right: 5px;
      width: 20px;
      height: 20px;
      display: inline-block;
      content: "";
      background: url(../../assets/images/componentsimg/common_z.png) no-repeat;
      vertical-align: middle;
    }
    &.col-1::before {
      background-position: -2px -320px;
    }
    &.col-2::before {
      background-position: -376px -135px;
    }
    &.col-3::before {
      background-position: -295px -174px;
    }
  }
}
.nav-right {
  float: right;
  li {
    float: left;
    list-style: none;
    padding: 0 5px;
    .che {
      width: 24px;
      height: 24px;
      background: url(../../assets/images/componentsimg/common_z.png) -340px -284px
        no-repeat;
      display: inline-block;
      vertical-align: middle;
    }
    .leng {
      color: #fe7a24;
    }
    .el-icon-caret-bottom {
      color: #d9d9d9;
    }
    &:hover .el-icon-caret-bottom {
      color: #fe7a24;
    }
  }
  .line {
    color: #d9d9d9;
    padding: 0;
  }
}
li {
  border: 1px solid transparent;
  position: relative;
  box-sizing: border-box;
}
li.bg:hover {
  background: #fff;
  border: 1px solid gainsboro;
  border-bottom: none;
  box-sizing: border-box;
}
li.bg:hover > .box {
  display: block;
}
// logo
.content-bg {
  width: 1200px;
  height: 120px;
  // line-height: 120px;
  padding-top: 30px;
  margin: 0 auto;
  overflow: hidden;
  background-color: white;
  div {
    float: left;
  }
  .logo {
    width: 500px;
  }
  .seach {
    width: 300px;
    height: 34px;
    input {
      border: 1px solid #fe7a24;
      padding: 3px 5px;
      outline-style: none;
    }
    button {
      background: #fe7a24;
      border: 1px solid #fe7a24;
      padding: 3px 20px;
      color: #fff;
      outline-style: none;
    }
  }
  .hone {
    margin-left: 100px;
    div {
      margin: 0 10px;
      font-size: 12px;
      color: gray;
    }
    span {
      width: 25px;
      height: 25px;
      display: inline-block;
      background: url(../../assets/images/componentsimg/common_z.png) no-repeat;
      vertical-align: middle;
      margin-right: 5px;
    }
    .sj {
      background-position: -382px -49px;
    }
    .kf {
      background-position: -297px -133px;
    }
  }
}
// 导航
.nav-bg {
  background: #fe7a24;
  color: #fff;
  font-weight: bold;
  a {
    color: #fff;
  }
  .nav-box {
    width: 1200px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
  }
  .title-box{
    float: left;
    position: relative;
    width: 210px;
  }
  .title {
    background: #ff6a00;
    padding: 0 15px;
    i {
      position: absolute;
      top: 12px;
      right: 15px;
    }
  }
  .title-box:hover .title-nav-box{
    display: block;
  }
  .title-nav-box{
    background: #fff;
    border: 1px solid #ff6a00;
    border-top: none;
    border-bottom: 3px solid #ff6a00;
    padding: 5px 15px;
    overflow: hidden;
    display: none;
    position: absolute;
    z-index: 100;
    h4{
      color: #fe7a24;
      font-weight: bold;
    }
    ul{
      overflow: hidden;
      border-bottom: 1px solid gainsboro;
      padding-bottom: 10px;
    }
    li{
      list-style: none;
      line-height: 20px;
      float: left;
      margin-right: 5px;
    }
    a{
      color: gray;
      &:hover{
        color: #fe7a24;
        text-decoration: underline;
      }
    }
  }
  .nav{
    float: left;
    margin-left: 20px;
    li{
      float: left;
      border: none;
      a{
        padding: 0 24px;
        &:hover{
          background: #ff8833;
          color: #fff;
        }
      }
      
    }
  }
}
</style>